<template>
    <div class="search">
        <input 
            type="text" 
            class="search-input" 
            placeholder="请输入城市名或拼音"
            v-model="keyword"       
        >
        <div 
            class="search-content" 
            ref="search"
            v-show="keyword"
        >
            <ul>
                <li
                    class="search-item border-bottom"
                    v-for="item of list"
                    :key="item.id"
                    @click="handleCityClick(item.name)"
                >
                    {{ item.name }}
                </li>
                <li 
                    class="search-item border-bottom"
                    v-show="hasNoData"
                >
                    没有找到匹配数据
                </li>
            </ul>
        </div>
    
    

    </div>
</template>

<script>
import Bscroll from 'better-scroll'
export default {
    name: 'CitySearch',
    data(){
        return {
            keyword:'',
            list:[],
            timer:null,
            hasNoData:false
        }
    },
    props:{
        cities:Object
    },
    watch:{
        keyword(){
            if(this.timer){
                clearTimeout(this.timer)
            }
            if(this.keyword === ''){
                this.list = []
                return
            }
            this.timer = setTimeout(()=>{
                const result = []
                for(let i in this.cities){
                    this.cities[i].forEach((v)=>{
                        if(v.spell.indexOf(this.keyword) > -1 || v.name.indexOf(this.keyword) > -1){
                            result.push(v)
                        }
                    })
                }
                this.showNoData(result.length)
                this.list = result
            },100)
        }
    },
    computed:{
        // hasNoData(){
        //     return !this.list.length && this.keyword
        // }
    },
    mounted(){
        this.scroll = new Bscroll(this.$refs.search,{ 
            mouseWheel: true, 
            click: true, 
            tap: true 
        })
    },
    methods:{
        showNoData(length){
            if(!length){
                this.hasNoData = true
            }else{
                this.hasNoData = false
            }
        },
        handleCityClick(city){
            this.$store.dispatch("changeCity",city)
            // this.$store.commit("changCity",city)
            this.$router.push('/')
        }
    }

}
</script>

<style lang="stylus" scoped>
@import '~@/assets/styles/variables.styl';
.search 
    height:.72rem 
    background:$bgColor
    padding:0 .1rem
    .search-input
        width: 100%
        height:.62rem
        line-height:.62rem
        text-align:center
        border-radius:.06rem
        color:#666
        box-sizing:border-box
        padding:0 .1rem
.search-content
    z-index:1
    overflow:hidden
    position:absolute
    top:1.58rem
    left:0
    right:0
    bottom:0
    background:#eee
    .search-item
        line-height:.62rem
        padding-left:.2rem
        color:#666
        background:#fff

</style>
